<template>
    <div class="contact-input-container">
        <select 
            v-model="form.telType" 
            class="type-select"
            aria-label="选择联系方式类型"
        >
            <option value="phone">电话</option>
            <option value="email">电子邮箱</option>
        </select>

        <input 
            v-model="form.relNum" 
            :placeholder="placeholder" 
            :class="['contact-input', form.telType]"
            :type="form.telType === 'phone' ? 'tel' : 'email'"
            :aria-label="placeholder"
        />
    </div>
</template>

<script>
export default {
    name: 'ContactInfo',
    data() {
        return {
            num: 1,
            show: true,
            form: {
                telType: 'phone',
                relNum: ''
            }
        }
    },
    computed: {
        placeholder() {
            return this.form.telType === 'phone' 
                ? '请输入电话号码' 
                : '请输入邮箱地址';
        },
        numAddOne() {
            return this.num + 1;
        }
    },
    watch: {
        num(val, oldVal) {
            console.log(`num变化: 旧值=${oldVal}, 新值=${val}`);
        },
        numAddOne() {
        },
        "form.telType"(val) {
            this.form.relNum = '';
        }
    },
    methods: {
        numAddOneFun() {
            return this.num + 1;
        },
        setShow() {
            this.show = !this.show;
        }
    }
}
</script>

<style>
.contact-input-container {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 15px;
    max-width: 400px;
}

.type-select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.type-select:focus {
    outline: none;
    border-color: #42b983;
    box-shadow: 0 0 0 2px rgba(66, 185, 131, 0.2);
}

.contact-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.contact-input:focus {
    outline: none;
    border-color: #42b983;
    box-shadow: 0 0 0 2px rgba(66, 185, 131, 0.2);
}

.contact-input.phone {
}

.contact-input.email {
}
</style>
    